<template>
  <!-- 编辑商品  -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="商品信息" width="50%" :before-close="handleClose" top="100px" :append-to-body="true" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="GoodsForm" :model="formParams" :rules="ruleForm" label-position="right" >
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}
            <span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='goods_name'" label="" prop="goods_name">
              <el-input class="width50" type="text" v-model="formParams.goods_name" clearable placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='remark'" label="" prop="remark">
              <el-input class="width50" type="text" v-model="formParams.remark" clearable placeholder="请输入商品备注"></el-input>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='goods_price'" label="" prop="goods_price">
              <el-input-number :min="1" :max="10000000000000" :precision="0" v-model="formParams.goods_price" controls-position="right" clearable placeholder="请输入商品价格"/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='goods_type'" label="" prop="goods_type">
              <el-select v-model="formParams.goods_type" placeholder="请选择商品类型" filterable class="marginR10">
                <el-option v-show="item.value" :label="item.label" :value="item.value" v-for="(item, index) in goodsTypeData" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='activity_type'" label="" prop="activity_type">
              <el-select v-model="formParams.activity_type" placeholder="请选择商品对应活动类型" filterable class="marginR10">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in activityTypeData" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='is_show'" label="" prop="is_show">
              <el-radio-group v-model="formParams.is_show">
                <el-radio-button :label="1" >展示</el-radio-button>
                <el-radio-button :label="0" >隐藏</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('GoodsForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addGoods,
  editGoods
} from "@/api/activity";
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    activityTypeData: {
      type: Array,
      default: function () {
        return []
      }
    },
    goodsTypeData: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData:[
        {label:'商品名称',key:'goods_name',pass:true},
        {label:'商品备注',key:'remark'},
        {label:'商品价格',key:'goods_price',pass:true},
        {label:'商品类型',key:'goods_type',pass:true},
        {label:'活动类型',key:'activity_type',pass:true},
        {label:'是否展示',key:'is_show'},
      ],
      formParams: {
        goods_name: '', //商品名称
        goods_price: '', //商品价格
        remark: '', //商品备注
        is_show: 1, //是否关闭 0是关闭
        goods_type:'',//商品类型
        activity_type:''
      },
      ruleForm: {
        goods_name: [{ required: true, trigger: 'blur', message: '请输入商品名称', }],
        goods_price: [{ required: true, trigger: 'blur', message: '请输入商品价格', }],
        goods_type: [{ required: true, trigger: 'blur', message: '请选择商品类型', }],
        activity_type: [{ required: true, trigger: 'blur', message: '请选择商品对应活动类型', }],
      },
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          goods_name: '', //商品名称
          goods_price: '', //商品价格
          remark: '', //商品备注
          is_show: 1, //是否关闭 0是关闭
          goods_type:'',
          activity_type:''
        }
      }
    },
  },
  mounted () {},
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this,params = JSON.parse(JSON.stringify(that.formParams));
      params.goods_price=that.$public.mathNumberMultiply(params.goods_price,10000)
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (!params.id) {
            addGoods(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editGoods(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.el-form-item{
  margin-bottom: 0;
}
.content{
  min-height: 60px;
  padding: 10px;
}
</style>
